import React from "react"
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  FlatList,
  TextInput,
  Dimensions,
} from "react-native"
import {useTHNavigation} from "../../utils/navigation"

const {width} = Dimensions.get("window")

// 示例消息数据
const messages = [
  {
    id: "1",
    type: "text",
    from: "other",
    avatar: "https://img.yzcdn.cn/vant/cat.jpeg",
    content:
      "问：你喜欢什么？\n答：我喜欢秋天的落叶，夏天的泉水，冬天的雪地，只要有你一切皆可~",
  },
  {
    id: "2",
    type: "text",
    from: "me",
    avatar: "https://img.yzcdn.cn/vant/cat.jpeg",
    content: "你要干嘛啊",
  },
  {
    id: "3",
    type: "voice",
    from: "other",
    avatar: "https://img.yzcdn.cn/vant/cat.jpeg",
    duration: 7,
  },
  {
    id: "4",
    type: "image",
    from: "other",
    avatar: "https://img.yzcdn.cn/vant/cat.jpeg",
    image: "https://img.yzcdn.cn/vant/cat.jpeg",
  },
]

export default function Chat() {
  const navigaiton = useTHNavigation()
  // 渲染单条消息
  const renderItem = ({item}) => {
    const isMe = item.from === "me"
    return (
      <View style={[styles.msgRow, isMe && styles.msgRowMe]}>
        {!isMe && <Image source={{uri: item.avatar}} style={styles.avatar} />}
        <View style={[styles.bubbleWrap, isMe && styles.bubbleWrapMe]}>
          {item.type === "text" && (
            <Text
              style={[
                styles.bubble,
                isMe ? styles.bubbleMe : styles.bubbleOther,
              ]}>
              {item.content}
            </Text>
          )}
          {item.type === "voice" && (
            <View style={styles.voiceBubble}>
              <Text>)) {item.duration}”</Text>
              <View style={styles.voiceDot} />
            </View>
          )}
          {item.type === "image" && (
            <Image source={{uri: item.image}} style={styles.msgImage} />
          )}
        </View>
        {isMe && <Image source={{uri: item.avatar}} style={styles.avatar} />}
      </View>
    )
  }

  return (
    <View style={styles.container}>
      {/* 顶部栏 */}
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigaiton.goBack()}>
          <Text style={styles.headerBack}>{"<"}</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>黑马大鹏</Text>
        <TouchableOpacity>
          <Text style={styles.headerMore}>更多</Text>
        </TouchableOpacity>
      </View>
      {/* 缘分值栏 */}
      <View style={styles.fateBar}>
        <Image style={styles.fateAvatar} source={{uri: messages[0].avatar}} />
        <View style={styles.fateCenter}>
          <Text style={styles.fateScore}>缘分值 98</Text>
          <Text style={styles.fateDesc}>年龄相仿 兴趣相仿 收入相仿</Text>
        </View>
        <Image style={styles.fateAvatar} source={{uri: messages[1].avatar}} />
      </View>
      {/* 聊天消息区 */}
      <FlatList
        data={messages}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        style={styles.msgList}
        contentContainerStyle={{padding: 16, paddingBottom: 80}}
        showsVerticalScrollIndicator={false}
      />
      {/* 底部输入区 */}
      <View style={styles.inputBar}>
        <TouchableOpacity>
          <Text style={styles.inputIcon}>🎤</Text>
        </TouchableOpacity>
        <TextInput style={styles.input} placeholder="请输入内容" />
        <TouchableOpacity>
          <Text style={styles.inputIcon}>😊</Text>
        </TouchableOpacity>
        <TouchableOpacity>
          <Text style={styles.inputIcon}>＋</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: "#F5F6FA"},
  header: {
    height: 106,
    backgroundColor: "#6C63FF",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingTop: 50,
  },
  headerBack: {color: "#fff", fontSize: 22},
  headerTitle: {color: "#fff", fontSize: 18, fontWeight: "bold"},
  headerMore: {color: "#fff", fontSize: 16},
  fateBar: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#B993F4",
    margin: 12,
    borderRadius: 30,
    padding: 10,
    paddingHorizontal: 18,
  },
  fateAvatar: {width: 48, height: 48, borderRadius: 24},
  fateCenter: {flex: 1, alignItems: "center"},
  fateScore: {color: "#fff", fontSize: 18, fontWeight: "bold"},
  fateDesc: {color: "#fff", fontSize: 12, marginTop: 4},
  msgList: {flex: 1, backgroundColor: "#F5F6FA"},
  msgRow: {flexDirection: "row", alignItems: "flex-end", marginBottom: 16},
  msgRowMe: {flexDirection: "row-reverse"},
  avatar: {width: 40, height: 40, borderRadius: 20, marginHorizontal: 8},
  bubbleWrap: {maxWidth: width * 0.7, flexDirection: "row"},
  bubbleWrapMe: {justifyContent: "flex-end"},
  bubble: {
    backgroundColor: "#fff",
    borderRadius: 12,
    padding: 12,
    fontSize: 16,
    color: "#333",
    overflow: "hidden",
  },
  bubbleMe: {backgroundColor: "#A5D6A7", color: "#222"},
  bubbleOther: {backgroundColor: "#fff", color: "#333"},
  voiceBubble: {
    backgroundColor: "#fff",
    borderRadius: 12,
    padding: 12,
    flexDirection: "row",
    alignItems: "center",
  },
  voiceDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: "#FF5252",
    marginLeft: 8,
  },
  msgImage: {width: 120, height: 120, borderRadius: 8},
  inputBar: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#fff",
    padding: 8,
    borderTopWidth: 1,
    borderColor: "#eee",
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
  },
  input: {
    flex: 1,
    backgroundColor: "#F2F2F2",
    borderRadius: 20,
    paddingHorizontal: 16,
    fontSize: 16,
    marginHorizontal: 8,
    height: 40,
  },
  inputIcon: {fontSize: 24, marginHorizontal: 4},
})
